<template>
  <div class="common-layout">
    <el-container direction="vertical">
      <el-header>
        <Header></Header>
      </el-header>
      <el-main>
        <Main></Main>
      </el-main>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Header from "./my-header.vue";
import Main from "./my-main.vue";
import Footer from "./my-footer.vue";
</script>

<style scoped lang="scss">
.common-layout {
  height: 100%;
    .el-container {
        height: 100%;
        .el-header {
            height: 60px !important;
            border-bottom: 1px solid #444550;
        }
        .el-aside {
            width: 13.543192rem !important;
        }
        .el-main {
            padding: 0;
            display: flex;
            flex-direction: column;
            .menuTitle {
                background-color: #1e202a;
                display: flex;
                align-items: center;
                height: 3.074671rem;
                border-bottom: 1px solid #444550;
                .returnIcon {
                    width: 3.660322rem;
                    border-right: 1px solid #444550;
                    text-align: center;
                    i {
                        cursor: pointer;
                        color: #c2c6cc;
                        font-size: 1.610542rem;
                        line-height: 3.074671rem;
                        &:hover {
                            color: #fff;
                        }
                    }
                }
                span {
                    color: #c2c6cc;
                    font-size: 1.171303rem;
                    margin-left: 1.24451rem;
                }
            }
            .content {
                flex: 1;
            }
        }
    }
}
body {
  font-family: "Source Sans Pro", sans-serif;
}
.wrapper {
  padding: 10px 10px;
}
</style>
